
<template>
<theme-box title="商户入驻申请">
    <form class="form-inline" @submit.prevent v-el:form>
        <div class="box-body">
            <form-input title="商户名称" :required="true" name="mchtName"></form-input>
            <form-select title="商户标志" :required="true" name="mchtBusType" :options="flagOptions" :value.sync="flagVal"></form-select>
            <form-group title="商户类型" :required="true" v-show ="flagVal != 3">
                <select name="upperDictId" class="form-control" v-model="dictVal" style="width: 265px">
                    <option v-for="dict in dictList" :value="dict.value">
                        {{dict.key}}
                    </option>
                </select>
            </form-group>
            <form-group title="商户主类型" :required="true" v-show ="flagVal != 3">
                <select name="mchtType" class="form-control" style="width: 265px">
                    <option v-for="dict in secondList" :value="dict.dictId">
                        {{dict.dictValue}}
                    </option>
                </select>
            </form-group>

            <form-input title="固定电话" :required="true" name="mchtTel"></form-input>
            <form-select title="抓取设备标志"  name="equipFlag" :options="equipFlagOptions" v-show ="flagVal != 3"></form-select>
            <form-group title="营业执照"  :required="true" name="file">
                <file-upload  v-ref:fileupload class="fileImg"></file-upload>
            </form-group>
            <form-select title="商区园区标识"  :required="true" name="streamDbt" :options="dbtFlagOptions" v-show ="flagVal != 3"></form-select>
            <form-input title="负责人姓名" :required="true" name="leadName"></form-input>
            <form-input title="负责人电话" :required="true" name="leadPhone"></form-input>
            <form-input title="负责人身份证号" :required="true" name="leadId"></form-input>
          </div>
        <form-group title="商户地址" :required="true">
            <select id="province" style="margin-left: 9px">
                <option>省份（市）</option>
            </select>
            <select id="city">
                <option>市（区）</option>

            </select>
            <select id="county">
                <option>县、镇</option>
            </select>
            <textarea class="form-control " rows="2" name="mchtAddr" id="mchtAddr" placeholder="请输入详细地址" style="width:100%;margin-left: 173px;"></textarea>
        </form-group>
        <!-- /.box-body -->
        <div class="box-footer">
            <v-button type="reset" @click="reset">重置</v-button>
            <v-button type="submit" theme="primary" class="pull-right">确认</v-button>
        </div>
    </form>
        <!-- /.box-footer -->
</theme-box>
</template>
<script>

import 'plugins/jquery-validation';
import city from 'lib/city.js';
var serialize = require('form-serialize');

export default {
    data: () => ({
              dictVal:'',
              flagVal:'',
              dictList:[],
              secondList:[],
              equipFlagOptions:[
              {key:"不需要",value:"1"},
              {key:"需要",value:"0"}
              ],
              flagOptions:[
              {key:"无分店",value:"0"},
              {key:"有分店",value:"1"},
              {key:"代理商",value:"3"},
              {key:"商圈",value:"4"}
              ],
              dbtFlagOptions:[
              {key:"商区",value:"business"},
              {key:"园区",value:"park"}
              ]
    }),
    watch:{
        async dictVal(v){
            this.$post({
                url: "/api/v1" + projectName_Url + "/list/caterdict/" + v + '/0',
                method: "GET"
            }).then(response => {
                let list = response.content.info;
                this.$set("secondList", list)
            }, error => {
            });
        }
    },
    methods: {
        reset() {
            $("label.error").remove();
            this.$els.form.reset()
            $(".loader").css("display","none")
            this.flagVal = '0'
        },
        dictFn(data) {
          let self = this;
          self.$post({
            url: "/api/v1" + projectName_Url + "/list/caterdict/back_type/0",
            method:"GET"
          }).then(response => {
            let list = response.content.info;
            self.$set("dictList", list)
            self.dictVal = list[0].value
          }, error => {});
        },
        secondFn(data) {
            let self = this;
            self.$post({
                url: "/api/v1" + projectName_Url + "/list/caterdict/0/" + this.mchtType,
                method: "GET"
            }).then(response => {
                let list = response.content.info;
                self.$set("secondList", list)
            }, error => {
            });
        }
    },
    ready() {
        var self = this;
        self.dictFn();

        //如果输地址 必须要选省市区
        $('#mchtAddr').click(function(){
            if($('#province').val() != '北京' && $('#province').val() != '天津' && $('#province').val() != '上海' && $('#province').val() != '重庆' && $('#province').val() != '香港' && $('#province').val() != '台湾' && $('#province').val() != '澳门' && $('#province').val() != '国外'){
                if($('#province').val() == '省份（市）' || $('#city').val() == '市（区）' || $('#county').val() == '县、镇'){
                    Midway.alert({title: "操作提示", content: '请先选择省、市、区'});
                }
            }else if($('#province').val() == '省份（市）' || $('#city').val() == '市（区）'){
                Midway.alert({title: "操作提示", content: '请先选择省、市、区'});
            }
        })
        for(var i in city){
            var cityAll= city[i].citylist;
        }
        $.each(cityAll,function(i,n){
            $("#province").append('<option value="'+ n.p + '">' + n.p + '</option>');
        });
        $("#province,#city").change(function(){
            if($(this).attr("id") == "province"){
                $("#city").html("").append('<option value="市（区）">市（区）</option>').next().html("").append('<option value="县、镇">县、镇</option>');
            }else{
                $("#county").html("").append('<option value="县、镇">县、镇</option>');
            }
            $.each(cityAll,function(j,k){
                if($("#province").val() == k.p){
                    $.each(k.c,function(l,m){
                        $("#city").append('<option value="'+ m.n + '">' + m.n + '</option>');
                        if(m.a){
                            $("#county").show();
                            if($("#city").val() == m.n){
                                $.each(m.a,function(e,f){
                                    $("#county").append('<option value="'+ f.s + '">' + f.s + '</option>');
                                });
                            }
                        }else{
                            $("#county").hide();
                        }
                    });
                }
            });
        });

        $(this.$els.form).validate({
            submitHandler: async function(form) {
                 let formData = new FormData(form)
                 loading(true);
                // 入驻：商户类型 1 抓取标志1 商区园区 business
                if(formData.mchtBusType == '3'){
                    formData.set("mchtType", 1);
                    formData.set("equipFlag", 1);
                    formData.set("streamDbt", 'business');
                }
                //拼接地址 省市区
                var p_value = $('#province').val();
                var c_value = $('#city').val();
                var a_value = $('#county').val();
                var addr = $('#mchtAddr').val();
                var arr = new Array();
                arr.push(p_value);
                arr.push(c_value);
                if(a_value != '县、镇'){
                    arr.push(a_value);
                }
                arr.push(addr);
                var str = arr.join('');
                formData.set('mchtAddr',str);

                 var result = await self.$post({
                    url: "/api/v1"+ projectName_Url +"/plat/mcht/enter",
                    data: formData,
                    method:"post"
                }).then(response => {
                     let data = {
                         title: "操作成功",
                         content: "是否进入商户入驻列表查看?"
                     }
                     self.reset();
                     Midway.confirm(data).then(function () {
                         self.$route.router.go('/merchantSettled/list');
                     })
                 }).then(() => loading(false)).catch(() => loading(false))
            },

            errorPlacement: function(error, element) {
                if (element.attr("name") == "file") {
                    error.insertAfter(".file-item");
                } else {
                    error.insertAfter(element)
                }
            },
            rules: {
                   mchtType: {
                        required: true,
                    },
                   equipFlag: {
                        required: true,
                       // digits: true, 只能是整数
                    },
                   file:{
                     required:true
                   },
                   streamDbt:{
                       required: true
                    },
                    leadId: {
                        required: true,
                        isIDCard:true
                    },
                    leadName: {
                       required: true,
                        maxlength:10
                    },
                     leadPhone: {
                        required: true,
                        isPhone:true
                    },
                    mchtAddr:{
                        required: true,
                        maxlength:40,
                    },
                    mchtName:{
                        required: true,
                        maxlength:16,
                    },
                    mchtTel:{
                        required: true,
                        isPhone:true
                    },
                    mchtType:{
                        required: true,
                        maxlength:32,
                    }
                  },
            messages: {
                file: {
                    required: "请选择附件"
                }
              }
        });
      }
    }
</script>

<style>
    .fix_min_width label#mchtAddr-error{
        position: relative;
        top:0;
        left: 173px;
    }
</style>